<template>
  <el-container>
    <el-header
      @click="scrollToContainer"
      style="
        height: calc(100vh - 80px);
        padding: 0;
        background-image: url('https://img.neptech.net/i/2025/06/17/ieca5m.webp');
        background-position: center;
        background-size: cover;
        cursor: pointer;
      "
    ></el-header>
    <el-container>
      <el-aside></el-aside>
      <el-main style="padding: 0; width: 80%; min-width: 1080px">
        <el-row :gutter="30" style="width: 100%">
          <el-col :span="18"
            ><div style="width: 100%">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i83rut.webp');
                      background-position: center;
                      background-size: cover;
                      color: white;
                      height: 300px;
                    "
                    shadow="hover"
                  >
                    <template #header>
                      <h3>什么是网络安全</h3>
                    </template>
                    <div class="card-content">
                      <p>
                        网络安全是指保护计算机网络系统中的硬件、软件及数据免受未经授权的访问、攻击、破坏、篡改或泄露，保障信息的机密性、完整性和可用性。随着互联网技术的迅猛发展，网络安全问题日益突出，黑客攻击、病毒传播、数据泄露等事件频发，给个人隐私、企业运营乃至国家安全带来严重威胁。
                      </p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i840sc.webp');
                      background-position: center;
                      background-size: cover;
                      color: white;
                      height: 300px;
                      cursor: pointer;
                    "
                    @click="router.push('/range')"
                    shadow="hover"
                  >
                    <h1
                      style="
                        font-size: 40px;
                        text-align: right;
                        margin-top: 20px;
                      "
                    >
                      要不，试一下？
                    </h1>
                    <p
                      style="
                        font-size: 30px;
                        text-align: right;
                        margin: 100px 20px 20px;
                      "
                    >
                      点击 进入练习靶场
                    </p>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i83vep.webp');
                      background-position: center;
                      background-size: cover;
                      height: 300px;
                      color: white;
                      cursor: pointer;
                    "
                    shadow="hover"
                    @click="router.push('/contest')"
                  >
                    <h1 style="font-size: 40px; text-align: left; margin: 20px">
                      已经，准备很充分了！
                    </h1>
                    <p
                      style="
                        font-size: 30px;
                        text-align: left;
                        margin: 100px 20px 20px;
                      "
                    >
                      点击 参加CTF考试
                    </p>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i849jx.webp');
                      background-position: center;
                      background-size: cover;
                      color: white;
                      height: 300px;
                    "
                    shadow="hover"
                  >
                    <template #header>
                      <h3>什么是CTF</h3>
                    </template>
                    <div class="card-content">
                      <p>
                        CTF（Capture The
                        Flag）是一种网络安全竞赛形式，通过游戏化挑战提升参与者的安全技能。比赛分为解题、攻防及混合模式，涉及密码学、逆向工程、漏洞挖掘等领域。参赛者通过解决难题或攻击/防御系统获取“旗帜”以得分。CTF不仅是技术较量，也是学习交流的平台，对培养和发现网络安全人才至关重要。
                      </p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i83xbp.webp');
                      background-position: center;
                      background-size: cover;
                      color: white;
                      height: 300px;
                    "
                    shadow="hover"
                  >
                    <template #header>
                      <h3>漏洞有哪些</h3>
                    </template>
                    <div class="card-content">
                      <p>
                        常见的漏洞类型包括：缓冲区溢出、SQL注入、跨站脚本（XSS）、命令注入、文件包含漏洞、权限提升、逻辑漏洞等。这些漏洞可能被攻击者利用，导致数据泄露、系统失控或服务中断等安全事件。及时发现并修复漏洞是保障网络安全的关键措施之一。
                      </p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card
                    @click="handleClick()"
                    style="
                      background-image: url('https://img.neptech.net/i/2025/06/17/i8471l.webp');
                      background-position: center;
                      background-size: cover;
                      color: white;
                      height: 300px;
                    "
                    shadow="hover"
                  >
                    <h1
                      style="
                        font-size: 40px;
                        text-align: right;
                        margin-top: 20px;
                        cursor: pointer;
                      "
                    >
                      你的防火墙没开！
                    </h1>
                    <p
                      style="
                        font-size: 30px;
                        text-align: right;
                        margin: 100px 20px 20px;
                      "
                    >
                      点击 前往代码审计
                    </p>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card style="height: 400px" shadow="hover">
                    <ContestSituation />
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card style="height: 400px" shadow="hover">
                    <UserStatistics />
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="width: 100%">
              <el-row style="width: 100%" :gutter="20">
                <el-card style="width: 100%; height: 400px">
                  <div v-if="userStore.userInfo.userId" class="login-prompt">
                    <h3 style="margin-top: 20px">
                      欢迎您, {{ userStore.userInfo.nickname }}
                    </h3>
                    <el-avatar
                      :size="100"
                      style="margin: 50px"
                      :src="userStore.userInfo.avatarUrl"
                    ></el-avatar>
                    <p>不积跬步无以至千里</p>
                    <el-button
                      style="margin: 20px"
                      type="success"
                      @click="router.push('/range')"
                      >去练练手</el-button
                    >

                    <el-button
                      style="margin: 20px"
                      type="info"
                      @click="userStore.logout()"
                      >注销</el-button
                    >
                  </div>
                  <div v-else class="login-prompt">
                    <h3 style="margin-top: 20px">欢迎访问 WoniuCTF</h3>
                    <el-avatar
                      @click="router.push('/login')"
                      :size="100"
                      style="margin: 50px"
                      src="https://img.neptech.net/i/2025/06/17/i847wx.webp"
                    ></el-avatar>
                    <p>请登录以解锁更多精彩内容</p>

                    <el-button
                      style="margin: 20px"
                      type="primary"
                      @click="router.push('/login')"
                      >立即登录</el-button
                    >
                  </div></el-card
                >
              </el-row>
              <el-row style="width: 100%" :gutter="20">
                <!-- TODO 这里呼出AI对话框需要配置父子组件传值 -->
                <el-card body-style="padding: auto 0;" style="width: 100%; height: 400px;">
                  <L2D v-model="drawer" />
                </el-card>
              </el-row>
              <el-row body-style="padding: auto 0;" style="width: 100%" :gutter="20">
                <el-card style="width: 100%; height: 400px"
                  ><ScoreLevel
                /></el-card>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-aside></el-aside>
    </el-container>
  </el-container>
</template>
<script setup>
import ScoreLevel from "@/components/echarts/ScoreLevel.vue";
import UserStatistics from "@/components/echarts/UserStatistics.vue";
import ContestSituation from "@/components/echarts/ContestSituation.vue";
import L2D from "@/components/L2D.vue";
import router from "@/router";
import { userInfo } from "@/stores/userinfo";
const drawer = defineModel();
const userStore = userInfo();
const handleClick = () => {
  window.open("http://61.188.177.189:8765/index.html", "_blank");
};
const scrollToContainer = () => {
  const main = document.querySelector(".el-header");
  if (main) {
    main.scrollIntoView({ block: "start", behavior: "smooth" });
  }
};
</script>
<style>
.el-aside {
  width: 10%;
}
.el-row {
  margin: 20px;
}
p {
  line-height: 200%;
}
.el-card {
  border-radius: 20px !important;
}
.el-header {
  scroll-margin: -95vh;
}
.login-prompt {
  text-align: center;
}
</style>
